<template>
	<div class="verification" ref="verification" @mouseup="mouseUp">
		<!-- 画布部分 -->
		<canvas ref="slideVerify" class="slide-img"></canvas>
		<div style="display:none">
			<img ref="imgs" :src="imgList[imgIndex]" />
		</div>
		<!-- 下面滑块部分 -->
		<div class="slide-wrapper bg-start">
			<!-- 滑块 -->
			<div class="btn" ref="btn" @mousedown="mouseDown"></div>
			<p class="text" ref="text">{{content}}</p>
			<div class="bg" ref="bg"></div>
		</div>
		<!-- 刷新按钮 -->
		<el-button icon="el-icon-refresh-right" type="text" class="refresh" @click="refresh" :disabled="isTrue"></el-button>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				imgIndex: 0,
				blockCanvas: null,
				imgList: [require('../../assets/slider-verify/1.jpg'),
				require('../../assets/slider-verify/2.jpg'),
					require('../../assets/slider-verify/3.jpg'),
					require('../../assets/slider-verify/4.jpg'),
					require('../../assets/slider-verify/5.jpg')
				],
				content: '滑动滑块',
				isDown: false, // 鼠标是否按下
				btnX: 0,
				imgX: 0,
				
				isTrue:false,
			}
		},
		mounted() {
			this.imgIndex = this.randomNumber(0, 4)
			document.addEventListener('mousemove', this.mouseMove)
			this.imageCanvas()
		},
		methods: {
			// 生成随机数字
			randomNumber(min, max) {
				return Math.floor(Math.random() * (max - min) + min)
			},
			// 鼠标按下时
			mouseDown(e) {
				this.isDown = true
				this.btnX = e.clientX - this.$refs.btn.offsetLeft
			},
			// 鼠标滑动时
			mouseMove(e) {
				// 滑块左端向右边移动的距离
				let moveX = e.clientX - this.btnX
				if (this.isDown) {
					// 滑块滑动时不能超过的距离
					// if(this.$refs.btn.offsetLeft){
						if (this.$refs.btn.offsetLeft <= 259 && this.$refs.btn.offsetLeft >= 0) {
							this.$refs.btn.style.left = `${moveX}px`
							this.blockCanvas.style.left = `${moveX - this.imgX}px`
							this.$refs.bg.style.width = `${moveX}px`
						}else if(this.$refs.btn.offsetLeft >= 260){
							this.isDown = false
							this.mouseUp()
							this.$refs.btn.style.left = `${0}px`
							this.blockCanvas.style.left = `${-this.imgX}px`
							this.$refs.bg.style.width = `${0}px`
						}else if(this.$refs.btn.offsetLeft<=0){
							this.isDown = false
							this.mouseUp()
							this.$refs.btn.style.left = `${0}px`
							this.blockCanvas.style.left = `${-this.imgX}px`
							this.$refs.bg.style.width = `${0}px`
						}
					// }
					
				}
			},
			// 滑动中松开
			mouseUp(e) {
				console.log(e)
				let leftX = this.$refs.btn.offsetLeft
				// 方块的位置和缺失的位置重合允许左右2px的误差
				if (this.imgX >= leftX - 1 && this.imgX <= leftX + 1) {
					// 滑动成功时的逻辑
					this.$emit('successData',true)
					this.$refs.btn.classList.add('btnsuccess')
					this.isDown = false
				}
				// 如果滑动失败，滑块自动回到左边
				if (this.isDown) {
					this.$refs.btn.classList.remove('btnsuccess')
					this.$refs.btn.style.left = 0
					this.blockCanvas.style.left = `-${this.imgX}px`
					this.$refs.bg.style.width = 0
				}
				// 开关原则
				this.isDown = false
			},
			// 画图
			imageCanvas() {
				this.blockCanvas = this.blockCanvas ? this.blockCanvas.remove() : null
				this.blockCanvas = this.createCanvas(300, 150)
				this.$refs.verification.insertBefore(this.blockCanvas, this.$refs.slideVerify)
				let x = this.randomNumber(60, 200)
				let y = 40
				this.imgX = x
				let c = this.$refs.slideVerify
				let bg = c.getContext('2d')
				let img = this.$refs.imgs
				let bk = this.blockCanvas.getContext('2d')
				// 在两块画布上都放上相同的图片
				img.onload = () => {
					bg.drawImage(img, 0, 0)
					bk.drawImage(img, 0, 0)
				}
				this.drawBlock(bg, x, y, 'fill')
				this.drawBlock(bk, x, y, 'clip')
			},
			// 画抠出来的方块
			drawBlock(ctx, x, y, type) {
				ctx.beginPath()
				ctx.moveTo(x, y)
				ctx.arc(x + 42 / 2, y - 9 + 2, 9, 0.72 * Math.PI, 2.26 * Math.PI)
				ctx.lineTo(x + 42, y)
				ctx.arc(x + 42 + 9 - 2, y + 42 / 2, 9, 1.21 * Math.PI, 2.78 * Math.PI)
				ctx.lineTo(x + 42, y + 42)
				ctx.lineTo(x, y + 42)
				ctx.arc(x + 9 - 2, y + 42 / 2, 9 + 0.4, 2.76 * Math.PI, 1.24 * Math.PI, true)
				ctx.lineTo(x, y)
				ctx.lineWidth = 2
				ctx.fillStyle = 'rgba(255, 255, 255, 0.7)'
				ctx.strokeStyle = 'rgba(255, 255, 255, 0.7)'
				ctx.stroke()
				ctx[type]()
				ctx.globalCompositeOperation = 'destination-over'
				// 解决进入页面时不自动扣拼图样式的麻烦(有时需要鼠标点击后才会出现裁剪后的拼图)
				this.blockCanvas.style.left = `-${x}px`
			},
			// 刷新
			refresh() {
				// 有时会出现点击刷新，randomNumber返回的数字和上次存储的一样，画布清空后但是填充时没有改变；所以当一样时，不会执行刷新操作
				this.isTrue = true
				let that = this
				setTimeout(function(){
					that.isTrue = false
					let index = that.randomNumber(0, that.imgList.length)
					if(index==that.imgIndex){
						if(index==0){
							that.imgIndex =1
						}else{
							that.imgIndex =0
						}
					}else{
						that.imgIndex = index
					}
					that.clean()
					that.$refs.btn.style.left = 0
					that.$refs.bg.style.width = 0
					that.$refs.btn.classList.remove('btnsuccess')
					that.isDown = false // 鼠标是否按下
					that.btnX = 0 // 鼠标点击的水平位置与滑块移动水平位置的差
					that.imgX = 0
					that.imageCanvas('restore')
					console.log(that.imgIndex)
				},100)
				
			},
			// 清空canvas
			clean() {
				let cxt2 = this.$refs.slideVerify.getContext('2d')
				cxt2.clearRect(0, 0, 300, 150)
			},
			// 新建canvas
			createCanvas(width, height) {
				const canvas = document.createElement('canvas')
				canvas.width = width
				canvas.height = height
				canvas.style.position = 'absolute'
				return canvas
			}
		}
	}
</script>

<style scoped>
	.verification {
		position: relative;
		width: 300px;
		margin: 0 auto;
	}

	.slide-wrapper {
		position: relative;
		width: 300px;
		height: 40px;
	}

	.bg-start {
		background: #efefef;
		border:1px solid #ddd;
	}

	.bg {
		position: absolute;
		height: 40px;
		background: #43cf7c;
	}

	.text {
		position: absolute;
		width: 100%;
		height: 40px;
		text-align: center;
		line-height: 40px;
		margin: 0;
		/* z-index: 1; */
	}

	.text-success {
		color: white;
		z-index: 2;
	}

	.btn {
		position: absolute;
		width: 40px;
		height: 40px;
		z-index: 1;
		border-radius: 5px;
		background: rgb(143, 145, 148);
		text-align: center;
		font-size: 24px;
		color: white;
		box-shadow: 0 0 1px 1px #fff;
		cursor: pointer;
		background: #fff no-repeat center url("");
	}

	.btnsuccess {
		background: #fff no-repeat center url("");
	}

	.refresh {
		cursor: pointer;
		width: 20px;
		height: 20px;
		position: absolute;
		z-index: 1;
		top: 0;
		right: 10px;
		opacity: .6;
		/* background: url('../../assets/slider-verify/icon-button-normal.png') no-repeat; */
		/* background-size: cover; */
		color: #fff;
	}
</style>
